<template>
  <div @click="toggle">
    <!-- 根据 expanded 的值显示不同的图标 -->
    <template v-if="isFullscreen">
      <svg-icon name="fullscreen-shrink" size="25"></svg-icon>
    </template>
    <template v-else>
      <svg-icon name="fullscreen-expand" size="25"></svg-icon>
    </template>
  </div>
</template>

<script setup lang="ts">
import {useFullscreen} from "@vueuse/core";

// 参考 VueUse 官方文档 https://vueuse.pages.dev/core/useFullscreen/
// VueUse 是一个基于 Vue 3 Composition API 的高质量 Hooks 库，它提供了许多简单好用的 Hooks，可以帮助开发者快速实现各种功能。
// 使用 vueuse 提供的组合式API
const { isFullscreen, toggle } = useFullscreen()
</script>

<style scoped lang="scss">

</style>